<!-- 个人中心 -->
<template>
  <div v-loading.fullscreen.lock="loading">
    <!-- <div class="login" v-if="!login">
      <img :src="loginLogo" alt="">
      <el-button type="primary" class="button" @click="toLogin">登录</el-button>
    </div> -->
    <div class="profile">

      <!-- 信息栏 -->
      <div class="left">
        <div @click="uploadAvatar">
          <el-tooltip effect="dark" content="更换头像" placement="bottom" class="pointer">
            <el-avatar
              class="avatar select-none"
              :size="180"
              :fit="'contain'"
              :src="userInfo.avatarURL"
            >
              {{ userInfo.name }}
            </el-avatar>
          </el-tooltip>
        </div>
        <input type="file" style="display: none" id="imageUpload" accept="image/*">
        <h2 class="name">{{ userInfo.name }}</h2>
        <!-- <p class="abstract">我的简介简介</p> -->
        <div class="button">
          <el-button @click="setProfile" style="width: 150px; margin: 0 auto" size="small" icon="el-icon-setting">编辑个人信息</el-button>
          <el-button @click="dialog.visible = true" style="width: 150px; margin: 10px auto" size="small" type="primary" icon="el-icon-magic-stick">我的偏好</el-button>
        </div>
      </div>

      <!-- 展示栏 -->
      <div class="right">
        <ch-list :title="'动态'"></ch-list>
        <el-timeline v-loading="timelineLoading" :reverse="false">
          <el-timeline-item
            v-for="(activity, index) in focusList"
            :key="index"
            :placement="'top'"
            :timestamp="activity.timestamp"
            :color="'#ee3f4d'"
          >
            <template slot>
              <div @click="clickFocusItem(index)">
                <span class="focusTitle select-none">关注了
                  <span style="color: #888">
                    {{'  ' + activity.detail.title.slice(0,40) + '...'}}
                  </span>
                </span>
              </div>
            </template>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <el-dialog v-loading="dialog.loading" :visible="dialog.visible" title="我的偏好" :width="'50%'" :show-close="false">
      <template>
        <el-transfer v-model="dialog.myLike" :data="classifyMap" filterable :titles="['所有分类', '我的偏好']"></el-transfer>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="setRecommend">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'profile',
  data() {
    return {
      loading: false,
      timelineLoading: false,
      login: false,
      tokenInfo: {},
      userInfo: {},
      upload: '',
      focusList: [],
      classifyMap: [],
      loginLogo: require('@a/img/profile/login.svg'),
      // avatarImg: require('@a/img/login/bk1.jpg')
      dialog: {
        loading: false,
        visible: false,
        myLike: []
      }
    }
  },
  methods: {
    isLogin() {
      this.loading = true
      if (this.userInfo.id) {
        this.login = true
      } else {
        window.location.href = 'login.html'
      }
      this.loading = false
    },
    toLogin() {
      window.location.href = 'login.html'
    },
    uploadAvatar() {
      let image = document.getElementById('imageUpload')
      image.addEventListener('change', () => {
        this.upload = image.files[0]
        let form = new FormData()
        form.append('image', this.upload)
        form.append('name', this.tokenInfo.name)
        this.$post('/users/upload-avatar', form, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(
          res => {
            this.userInfo.avatarURL = res.url
            form.delete('image')
            this.$store.commit('UPDATE_USER_INFO')
          }
        ).finally(
          () => {
            // 初始化上传
            let image = document.getElementById('imageUpload')
            image.value = ''
            image.outerHTML = image.outerHTML
          }
        )
      })
      image.click()
    },
    setProfile() {
      this.$router.push('editProfile')
    },
    setRecommend() {
      this.dialog.loading = true
      this.$post('/recommend/set-like', {
        userId: this.userInfo.id,
        classifyKey: this.dialog.myLike
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('success')
        }
      }).finally(() => {
        this.dialog.loading = false
        this.dialog.visible = false
      })
    },
    getLikeClassify() {
      this.$get('/recommend/get-like', {
        userId: this.userInfo.id
      }).then(res => {
        this.dialog.myLike = res.data.classifyKey ? res.data.classifyKey : []
      })
    },
    getTimeline() {
      if (this.userInfo) {
        this.timelineLoading = true
        this.$get('/recommend/detail-focus-timeline', {
          userId: this.userInfo.id
        }).then(res => {
          if (res.code === 200) {
            this.focusList = res.data.map(item => {
              return {
                timestamp: this.$u.timeTransform(Date.parse(item.timestamp)),
                detail: item.detail
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: '关注线加载失败'
            })
          }
        }).finally(this.timelineLoading = false)
      }
    },
    clickFocusItem(index) {
      console.log(this.focusList[index])
      this.$router.push({
        path: '/cosmeticsDetail',
        query: {detailId: this.focusList[index].detail.detail_id}
      })
    },
    getClassifyMap() {
      this.$get('/parameter/get-classify-map').then(res => {
        this.classifyMap = res.data.map(item => {
          return {
            label: item.value,
            key: item.key
          }
        })
      })
    }
  },
  created() {
    this.userInfo = this.$store.state.userInfo
    console.log(this.userInfo)
  },
  mounted() {
    this.tokenInfo = JSON.parse(sessionStorage.getItem('tokenInfo')) || {}
    this.userInfo = this.$store.state.userInfo
    this.isLogin()
    this.getTimeline()
    this.getClassifyMap()
    this.getLikeClassify()
  }
}
</script>
<style lang='scss' scoped>
// @import ''
.login {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  flex-flow: row wrap;

  img {
    width: 300px;
    height: 300px;
  }

  .button {
    width: 300px;
  }
}

.profile {
  margin: 30px auto;
  width: 70%;
  height: 100%;
  display: flex;

  .left {
    text-align: center;

    .avatar {
      border: #ccc solid 5px;
    }
    .name {
      color: #333;
    }
    .abstract {
      color: $primary-text;
      font-size: 14px;
    }
    .button {
      display: flex;
      flex-flow: column;
    }
  }

  .right {
    margin: 0 0 0 60px;
    flex: 1;
    // background-color: #333;
  }
  .focusTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    cursor: pointer;
  }
}
</style>
